<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <link rel="stylesheet" href="../../js/layui/css/layui.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }

    .user {
      width: 100%;
      height: 100%;
      background: #001E3D;
      position: relative;
    }

    .layui-tab-title {
      border-color: currentColor;
      padding-top: 10px;
    }

    .layui-tab {
      margin: 0px;
    }

    .layui-tab-title li {
      color: #FEFEFE;
      font-size: 20px;
    }

    .layui-tab-brief>.layui-tab-title .layui-this {
      color: #D02B31;
    }

    .layui-this:after {
      border-bottom: 1px solid #D02B31 !important;
    }

    .layui-btn {
      background-color: #2CB6F5;
      float: right;
      margin-right: 15px;
      border-radius: 3px;
      width: 55px;
    }

    .layui-btn-sm {
      line-height: 25px;
      height: 25px;
      margin-top: 7px;
    }

    .contant {
      width: 100%;
    }

    .user-self {
      line-height: 35px;
      height: 35px;
      background-color: #064789;
      padding-left: 30px;
      margin: 5px 2px 1px 7px;
    }

    .item {
      color: #FDFDFD;
      font-size: 14px;
      line-height: 35px;
    }

    .layui-btn-xs {
      margin-top: 7px;
      background-color: #0870E4;
    }

    #demo2,
    #demo2log {
      float: right;
      margin-right: 70px;
    }

    .layui-laypage a,
    .layui-laypage span {
      height: 25px;
      line-height: 25px;
    }

    .addBox,
    .modifyBox {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      width: 450px;
      background-color: rgb(230, 236, 238);
      display: none;
    }

    .layui-form {
      margin-top: 15px;
    }

    .demo-tree {
      margin-left: 25%;
      margin-right: 25%;
      max-height: 300px;
      overflow-y: auto;
    }

    .subAdd {
      width: 85px;
      font-size: 14px;
      padding: 0;
      color: #fff;
      float: none;
    }

    .layui-input-block {
      padding-bottom: 20px;
    }

    .layui-input {
      height: 30px;
    }

    .btnClose {
      color: #fff;
      font-size: 20px;
      float: right;
      padding: 10px;
      cursor: pointer;
    }

    .addbtn,
    .searchbtn {
      position: absolute;
      top: 5px;
      right: 17px;
    }

    .addUser {
      float: left;
      margin: 10px;
      color: #fff;
    }

    .layui-form-select {
      float: left;
      width: 200px;
      margin-right: 10px;
    }

    .search {
      position: absolute;
      top: 19px;
      right: 25px;
    }

    .layui-inline {
      color: #fff;
      height: 30px;
    }

    .layui-input-inline input {
      width: 200px;
      height: 30px;
    }

    .layui-input-inline input[type="button"] {
      height: 30px;
      line-height: 30px;
      width: 63px;
    }

    .layui-form-label {
      padding: 0px 15px;
      line-height: 30px;
    }

    .line-time {
      color: #fff;
      padding: 5px;
    }

    .add-hander {
      height: 40px;
      background-color: black;
    }

    .layui-tree-icon {
      margin: 0 12px;
    }

    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: rgba(240, 240, 240, 0.5);
    }

    /* 定义滚动条轨道 内阴影+圆角 */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
      border-radius: 10px;
      background-color: rgba(240, 240, 240, .5);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
      background-color: rgba(240, 240, 240, .5);
    }
  </style>
</head>

<body>
  <!-- 用户管理 -->
  <div class="user">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this">用户管理</li>
        <li>日志</li>
      </ul>
      <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item  layui-show">
          <button type="button" class="layui-btn layui-btn-sm addbtn">添加</button>
          <div class="contant">
          </div>
          <div id="demo2"></div>
        </div>
        <div class="layui-tab-item">
          <div class="search">
            <form action="">
              <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                  <input type="text" name="title2" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
                    class="layui-input search-name">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">时间选择</label>
                <div class="layui-input-inline">
                  <input type="text" name="start_time" class="layui-input" id="start_time" placeholder="开始时间">
                </div>
              </div>
              <span class="line-time">~</span>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input type="text" name="end_time" class="layui-input" id="end_time" placeholder="结束时间">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline"><input type="button" class="layui-btn wy-btn" onclick="submit001()"
                    value="搜索" /></div>
              </div>
            </form>
          </div>
          <div class="contantlog" style="color: #fff;">
          </div>
          <div id="demo2log"></div>
        </div>
      </div>
    </div>
    <div class="addBox">
      <div class="add-hander">
        <div class="addUser"><span>添加用户</span></div>
        <div class="btnClose">x</div>
      </div>
      <form class="layui-form" id="form1" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">用戶名</label>
          <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">部&nbsp;&nbsp;&nbsp;&nbsp;门</label>
          <div class="layui-input-block" style="padding-bottom: 0px;">
            <select name="department" lay-verify="required">
              <option value=""></option>
              <option value="研发部">研发部</option>
              <option value="财务部">财务部</option>
              <option value="人事部">人事部</option>
              <option value="行政部">行政部</option>
              <option value="技术部">技术部</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">权限</label>
          <div id="test7" class="demo-tree"></div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn subAdd" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary subAdd">重置</button>
          </div>
        </div>
      </form>
    </div>
    <div class="modifyBox">
      <div class="add-hander">
        <div class="addUser"><span>修改用户</span></div>
        <div class="btnClose">x</div>
      </div>
      <form class="layui-form" action="" id="form2">
        <div class="layui-form-item">
          <label class="layui-form-label">用戶名</label>
          <div class="layui-input-inline">
            <input type="text" name="modname" required lay-verify="required" autocomplete="off" disabled
              class="layui-input modname">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
          <div class="layui-input-inline">
            <input type="password" name="modpassword" required lay-verify="required" placeholder="请输入密码"
              autocomplete="off" class="layui-input modpassword">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">部&nbsp;&nbsp;&nbsp;&nbsp;门</label>
          <div class="layui-input-block" style="padding-bottom: 0px;">
            <select name="department" lay-verify="required" class="moddepart">
              <option value=""></option>
              <option value="研发部">研发部</option>
              <option value="财务部">财务部</option>
              <option value="人事部">人事部</option>
              <option value="行政部">行政部</option>
              <option value="技术部">技术部</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">权限</label>
          <div id="test7mox" class="demo-tree"></div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn subAdd" lay-submit lay-filter="formmodify">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary subAdd">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <script src="../../js/layui/layui.js"></script>
  <script src="../../js/jquery.min.js"></script>
  <script src="../../config/config.js"></script>
  <script>
    // var username1 = window.localStorage.getItem('username');
    // if(username1 == null) {
    //   window.location.href = "http://localhost:5500/login.html"; 
    // }
    var modId
    var data1 = [];
    var childDatac = []
    var childDatad = []
    function moduleDate() {
      $.ajax({
        type: "get",
        url: loginUrl + "/findAllMenubar",
        async: false,
        success: function (data) {
          if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
              if (data[i].id == 29 || data[i].id == 30) {
                var casd = {
                  title: data[i].title, id: data[i].id
                }
                childDatad.push(casd)
              } else {
                var casc = {
                  title: data[i].title, id: data[i].id
                };
                childDatac.push(casc);
              }
            }
          }
        },
        error: function (e) {
          alert("数据跑丢了");
        }
      });
    }
    moduleDate()
    //模拟数据2
    data2 = [{
      title: '用户管理'
      , id: 'userModule'
    }, {
      title: '信息模型'
      , id: 'information'
      // , checked: true
      // ,children: [{
      //   title: '藜蒿炒腊肉'
      //   ,id: 8
      // },{
      //   title: '西湖醋鱼'
      //   ,id: 9
      // }]
    }, {
      title: '三维场景'
      , id: 'dscene'
      , children: childDatac
    }, {
      title: '模块管理'
      , id: 'modelManagement'
      , children: childDatad
    }, {
      title: '可视化'
      , id: 'visualization'
    }, {
      title: '数据管理'
      , id: 'dataManagement'

    }, {
      title: '外部管理'
      , id: 'externalManagement'
    }];

    //弹出框
    function openMsg(msg1) {
      layui.use('layer', function () {
        var layer = layui.layer;
        layer.open({
          title: '提示框'
          , content: msg1
          , type: 0
          , offset: '150px'
          , btnAlign: 'c'
          , anim: 1
        });

      });
    }

    var objDate = [];
    function searchDate() {
      objDate = []
      $.ajax({
        type: "get",
        url: loginUrl + "/user/getAllUser",
        async: false,
        cache: false,
        success: function (data) {
          if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
              var cas = {
                id: data[i].id,
                name: data[i].name,
                password: data[i].password,
                auth: data[i].auth,
                department: data[i].department,
                jurisdiction: data[i].jurisdiction
              };
              objDate.push(cas);
            }
            renderDate(objDate)
          }
        },
        error: function (e) {
          alert("数据跑丢了");
        }
      });
    }
    searchDate()
    var logDate = []
    function searchLog(userDate) {
      logDate = []
      $.ajax({
        type: "post",
        url: loginUrl + "/findAllLogs",
        async: false,
        contentType: "application/json",
        data: userDate,
        success: function (data) {
          if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
              var cas = {
                id: data[i].id,
                username: data[i].username,
                operate: data[i].operate,
                createtime: data[i].createtime
              };
              logDate.push(cas);
            }
            renderLog(logDate)
          }
        },
        error: function (e) {
          alert("数据跑丢了");
        }
      });
    }
    searchLog()

    var addDate = {}
    function increase(date) {
      // 
      $.ajax({
        type: "post",
        url: loginUrl + "/add/user",
        async: false,
        contentType: 'application/json',
        data: date,
        success: function (data) {
          if (!data.success) {
            openMsg("用户名已存在")
          } else {
            searchDate()
            $(".addBox").hide()
          }

        },
        error: function (e) {
          alert("数据跑丢了");
        }
      });
    }
    var modDate = []
    function atrrData(data) {
      objDate.map(function (item) {
        if (item.id == data) {
          modDate = item
        }
      })
    }
    var modifyObj = {}
    function modifydate(date) {
      $.ajax({
        type: "post",
        url: loginUrl + "/update",
        async: false,
        contentType: 'application/json',
        data: date,
        success: function (data) {
          searchDate()
          $(".modifyBox").hide()
        },
        error: function (e) {
          alert("数据跑丢了");
        }
      });
    }
    function renderDate(data) {
      layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage,
          layer = layui.layer;
        laypage.render({
          elem: 'demo2'
          , count: data.length
          , theme: '#1E9FFF'
          , limit: 10
          , jump: function (obj, first) {
            document.getElementsByClassName('contant')[0].innerHTML = function () {
              var arr = [],
                thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
              layui.each(thisData, function (index, item) {
                arr.push(
                  '<div class="user-self">' +
                  '<span data-id="' + item.id + '" class="item">' + item.name + '</span>' +
                  '<button data-id="' + item.id + '" type="button" class="layui-btn layui-btn-xs deletebtn">删除</button>' +
                  '<button data-id="' + item.id + '" data-jurisdiction="' + item.jurisdiction + '" type="button" class="layui-btn layui-btn-xs modifybtn">修改</button>' +
                  '</div>'
                );
              });
              return arr.join('');
            }();

          }
        });
      })
    }

    function renderLog(data) {
      layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage,
          layer = layui.layer;
        laypage.render({
          elem: 'demo2log'
          , count: data.length
          , theme: '#1E9FFF'
          , limit: 10
          , jump: function (obj, first) {
            document.getElementsByClassName('contantlog')[0].innerHTML = function () {
              var arr = [],
                thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
              layui.each(thisData, function (index, item) {
                arr.push(
                  '<div class="user-self layui-row">' +
                  '<div class="layui-col-md3" data-id="' + item.id + '" class="item">' + item.username + '</div>' +
                  '<div class="layui-col-md6" data-id="' + item.id + '" class="item">' + item.operate + '</div>' +
                  '<div class="layui-col-md3" data-id="' + item.id + '" class="item">' + item.createtime + '</div>' +
                  '</div>'
                );
              });
              return arr.join('');
            }();

          }
        });
      })
    }

    layui.use(['laydate'], function () {
      var $ = layui.$;
      var laydate = layui.laydate;
      var nowTime = new Date().valueOf();
      var max = null;

      var start = laydate.render({
        elem: '#start_time',
        type: 'datetime',
        max: nowTime,
        btns: ['clear', 'confirm'],
        done: function (value, date) {
          endMax = end.config.max;
          end.config.min = date;
          end.config.min.month = date.month - 1;
        }
      });
      var end = laydate.render({
        elem: '#end_time',
        type: 'datetime',
        max: nowTime,
        done: function (value, date) {
          if ($.trim(value) == '') {
            var curDate = new Date();
            date = { 'date': curDate.getDate(), 'month': curDate.getMonth() + 1, 'year': curDate.getFullYear() };
          }
          start.config.max = date;
          start.config.max.month = date.month - 1;
        }
      });
    })

    layui.use(['tree', 'util', 'form', 'laypage', 'layer', 'element'], function () {
      var laypage = layui.laypage
        , layer = layui.layer
        , tree = layui.tree
        , util = layui.util
        , form = layui.form;
      var $ = layui.jquery
        , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

      //触发事件
      var active = {
        tabChange: function () {
          //切换到指定Tab项
          element.tabChange('demo', '22'); //切换到：用户管理
        }
      };

      $('.site-demo-active').on('click', function () {
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
      });

      //开启复选框
      tree.render({
        elem: '#test7'
        , data: data2
        , showCheckbox: true
        , id: 'domid'
      });
      //开启复选框(修改)
      tree.render({
        elem: '#test7mox'
        , data: dataObj
        , showCheckbox: true
        , id: 'domidmox'
      });
      //监听提交
      form.on('submit(formDemo)', function (data) {

        var user = {
          name: data.field.title,
          password: data.field.password,
          department: data.field.department
        }

        var checkData = tree.getChecked('domid');
        var jurisdiction = {}
        checkData.map(function (item) {
          var flag = "true";
          var userModule = "";
          if (item.children) {
            for (var i = 0; i < item.children.length; i++) {
              if (item.children[i].id) {
                if (i == 0) {
                  userModule = flag + ";" + item.children[i].id;
                } else {
                  userModule = userModule + ";" + item.children[i].id;
                }
              }
            }
          } else {
            userModule = flag + ";"
          }
          jurisdiction[item.id] = userModule
        })

        addDate['user'] = user
        addDate['jurisdiction'] = jurisdiction
        increase(JSON.stringify(addDate))
        return false;
      });

      //监听提交(修改)
      form.on('submit(formmodify)', function (data) {
        var user = {
          id: Number(modId),
          name: data.field.modname,
          password: data.field.modpassword,
          department: data.field.department,
          jurisdiction: cjurisdiction
        }

        var checkData = tree.getChecked('domidmox');
        var jurisdiction = {}
        checkData.map(function (item) {
          var flag = "true";
          var userModule = "";
          if (item.children) {
            for (var i = 0; i < item.children.length; i++) {
              if (item.children[i].id) {
                if (i == 0) {
                  userModule = flag + ";" + item.children[i].id;
                } else {
                  userModule = userModule + ";" + item.children[i].id;
                }
              }
            }
          } else {
            userModule = flag + ";"
          }
          jurisdiction[item.id] = userModule
        })

        modifyObj['user'] = user
        modifyObj['jurisdiction'] = jurisdiction
        modifydate(JSON.stringify(modifyObj))
        return false;
      });
    })

    //提交搜索的点击事件，将时间拼接一下
    function submit001() {
      var startVal = $("#start_time").val()
      var endVal = $("#end_time").val()
      var searchName = $(".search-name").val()
      var userDate = {
        username: searchName,
        startTime: startVal,
        endTime: endVal
      }
      searchLog(JSON.stringify(userDate))
    }

    $(".btnClose").click(function () {
      $(".addBox").hide()
      $(".modifyBox").hide()
    })
    $(".addbtn").click(function () {
      document.getElementById("form1").reset();
      $(".addBox").show()
    })
    //删除
    $(document).on("click", ".deletebtn", function () {
      //1. 获取id值
      var did = $(this).attr("data-id");
      $.ajax({
        type: "post",
        url: loginUrl + "/delete/" + did,
        async: false,
        success: function (data) {
          if (data.code == 200) {
            console.log("删除成功")
          }
          window.location.reload();
        },
        error: function (e) {
          alert("数据跑丢了");
        }
      });
    })
    //修改
    var cjurisdiction
    var dataObj
    $(document).on("click", ".modifybtn", function () {
      dataObj = []
      dataObj = JSON.parse(JSON.stringify(data2))
      document.getElementById("form2").reset();
      cjurisdiction = $(this).attr("data-jurisdiction");
      //1. 获取id值
      var cid = $(this).attr("data-id");
      atrrData(cid);
      modId = cid;
      for (var a in modDate.auth) {
        if (typeof (modDate.auth[a]) == 'string') {
          if (modDate.auth[a].indexOf("true;") !== -1) {
            var str = modDate.auth[a].substring(5)
            var strs
            if (str !== "") {
              strs = str.split(";")
            }
            dataObj.map(function (item) {
              if (item.id == a && !item.children) {
                item.checked = true
              }
              if (item.children && strs !== undefined) {
                item.children.map(function (ite) {
                  for (var i = 0; i < strs.length; i++) {
                    if (ite.id == strs[i]) {
                      ite.checked = true
                    }
                  }
                })
              }
            })
          }
        }
      }
      layui.use(['tree'], function () {
        tree = layui.tree;
        tree.reload('domidmox', { data: dataObj });
      });
      $(".modifyBox").show()
      $(".modname").val(modDate.name)
      $(".modpassword").attr("type", "text").val(modDate.password)
      var slect = 'dd[lay-value=' + modDate.department + ']';
      $(".moddepart").siblings("div.layui-form-select").find(slect).click();
    })
  </script>
</body>

</html>